<script lang="ts" setup>
import {setting} from "@/setting";
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";
import axios from "axios";

const router = useRouter();
/**
 * 跳转至指定组件的示例页面
 * @param item
 */
const link = (item: any) => {
  router.push(`/${item.name}`);
};

/**
 * 跳转至低代码指定组件的示例页面
 * @param item
 */
const linkToLowCode = (item: any) => {
  router.push(`/lowCode/${item.name}`);
};

/**
 * 跳转至数据大屏指定组件的示例页面
 * @param item
 */
const linkToDataWorks = (item: any) => {
  router.push(`/dataWorks/${item.name}`);
}

/**
 * 跳转至API页面
 * @param item
 * @param type
 */
const toAPI = (item: any, type: String) => {
  if (item.status !== 2) {
    ElMessage.warning("该组件暂未发布，敬请期待！");
    return false;
  }
  router.push(`/api/${type}/${item.name}`);
};

/**
 * 组件API解析生成静态文件
 */
const compiler = async () => {
  const {data} = await axios.post("http://localhost:3001/compiler");
  ElMessage.success(data);
};
</script>
<template>
  <div class="w-full h-full flex flex-col pl-10px pt-10px pb-10px">
    <div class="flex justify-between">
      <div>
        <el-tag type="info" size="large">开发中</el-tag>
        <el-tag class="ml-5px" size="large">测试中</el-tag>
        <el-tag class="ml-5px" type="success" size="large">已发布</el-tag>
        <el-tag class="ml-5px" type="warning" size="large">已暂停</el-tag>
        <el-tag class="ml-5px" type="danger" size="large">已停用/删除</el-tag>
      </div>
      <div>
        <!--        <el-button type="primary" @click="compiler">API文件解析</el-button>-->
      </div>
    </div>
    <div class="flex-1 flex">
      <CisFlexScroll>
        <h1 class="mt-20px mb-15px">组件库组件</h1>
        <el-row :gutter="20">
          <el-col :span="6" v-for="item in setting.components" :key="item.name">
            <el-card
                class="box-card cursor-pointer mt-10px"
                @click.native="link(item)"
            >
              <template #header>
                <div class="card-header flex justify-between items-center">
                  <el-tag
                      :type="
                  item.status === 0
                    ? 'info'
                    : item.status === 1
                    ? ''
                    : 'success'
                "
                      size="large"
                  >{{ item.name }}
                  </el-tag>
                  <div>
                    <el-tag effect="plain" size="large" v-if="item.Categorize">{{
                        item.CategorizeCn
                      }}
                    </el-tag>
                    <el-tag
                        size="large"
                        class="ml-1 api-tag"
                        type="danger"
                        effect="dark"
                        @click.stop="toAPI(item, 'library')"
                    >API
                    </el-tag>
                  </div>
                </div>
              </template>
              <p>{{ item.des }}</p>
            </el-card>
          </el-col>
        </el-row>
        <h1 class="mt-20px mb-15px">低代码库组件</h1>
        <el-row :gutter="20">
          <el-col :span="6" v-for="item in setting.lowCode" :key="item.name">
            <el-card
                class="box-card cursor-pointer mt-10px"
                @click.native="linkToLowCode(item)"
            >
              <template #header>
                <div class="card-header flex justify-between">
                  <el-tag
                      :type="
                  item.status === 0
                    ? 'info'
                    : item.status === 1
                    ? ''
                    : 'success'
                "
                      size="large"
                  >{{ item.name }}
                  </el-tag>
                  <div>
                    <el-tag effect="plain" size="large" v-if="item.Categorize">{{
                        item.CategorizeCn
                      }}
                    </el-tag>
                    <el-tag
                        class="ml-1 api-tag"
                        size="large"
                        type="danger"
                        effect="dark"
                        @click.stop="toAPI(item, 'lowCode')"
                    >API
                    </el-tag>
                  </div>
                </div>
              </template>
              <p>{{ item.des }}</p>
            </el-card>
          </el-col>
        </el-row>
        <h1 class="mt-20px mb-15px">大数据组件</h1>
        <el-row :gutter="20">
          <el-col :span="6" v-for="item in setting.dataWorks" :key="item.name">
            <el-card
                class="box-card cursor-pointer mt-10px"
                @click.native="linkToDataWorks(item)"
            >
              <template #header>
                <div class="card-header flex justify-between">
                  <el-tag
                      :type="
                  item.status === 0
                    ? 'info'
                    : item.status === 1
                    ? ''
                    : 'success'
                "
                      size="large"
                  >{{ item.name }}
                  </el-tag>
                  <div>
                    <el-tag effect="plain" size="large" v-if="item.Categorize">{{
                        item.CategorizeCn
                      }}
                    </el-tag>
                  </div>
                </div>
              </template>
              <p>{{ item.des }}</p>
            </el-card>
          </el-col>
        </el-row>
      </CisFlexScroll>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.api-tag {
  margin-right: 5px;
  transition: all 0.3s ease-in-out;

  &:hover {
    margin-right: 0;
  }
}
</style>
